<template>
    <div class="flex flex-wrap">
        <sidebar />
        <div class="p-8">
            <h2 class="font-bold my-4">灵感绘图</h2>
            <div class="grid grid-cols-3 gap-2">
                <div class="relative w-24 h-24 overflow-hidden rounded-lg cursor-pointer"
                    v-for="(item, index) in section1" :key="index" @click="styleIndex = index"
                    :class="styleIndex == index ? 'border-4 border-blue-500' : ''">
                    <img class=" w-24 h-24 " :src="item.image" />
                    <div class="absolute bottom-0 bg-gray-500 w-full z-10 text-center text-white">{{ item.title }}</div>
                </div>
            </div>
            <div class="flex justify-between items-center">
                <h2 class="font-bold my-4">创意描述</h2>
                <div class="cursor-pointer text-sm" @click="tryPrompt">试试手气</div>
            </div>
            <el-input v-model="input" placeholder="请输入创意描述" :rows="7" type="textarea"></el-input>
            <el-button class="my-4 w-full" type="primary" @click="confirm">立即生成</el-button>




        </div>

        <div id="outputbox" class=" bg-gray-100 p-16 flex-1 ">
            <div v-if="output.length > 0" class="grid md:grid-cols-2 gap-4">
                <img v-for="(item, index) in output" :key="index" class="w-full" :src="item.url" alt="">

            </div>
            <div v-else
                class="border-2 border-dashed border-slate-500 rounded-lg flex flex-col items-center justify-center items-center h-48 md:h-96">
                <img class="w-72" src="https://cdn.dancf.com/fe-assets/img/33c1f0fef8f45949960663d9424b4523.png" />
                <div class="font-bold">灵感绘图 🎉</div>
                <div class="text-slate-500">快去左侧输入你的灵感创意吧~</div>
            </div>

        </div>


    </div>
</template>
<script setup>
useSeoMeta({
    title: 'AI绘图工具_AI做图神器_AI图像处理 | 创意无限，绘图轻松',
    ogTitle: 'AI绘图工具_AI做图神器_AI图像处理 | 创意无限，绘图轻松',
    description: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogDescription: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogImage: 'https://cdn.mzyun.tech/logo_black.png',
    keywords:"AI绘图工具,AI图像处理,AI做图,AI绘画,AI绘画工具,AI绘画软件,AI绘画网站,明志科技,明志"
})
const section1 = ref([{
    image: "https://st0.dancf.com/market-operations/market/side/1715266158287.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp",
    link: "<3d cartoon>",
    title: "3D卡通",
}, {
    image: "https://st0.dancf.com/market-operations/market/side/1686660921912.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp",
    link: "<anime>",
    title: "动画",
}, {
    image: "https://st0.dancf.com/market-operations/market/side/1686661350471.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp",
    link: "<oil painting>",
    title: "油画",
}, {
    image: "https://st0.dancf.com/market-operations/market/side/1714024304097.jpg?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp",
    link: "<watercolor>",
    title: "水彩",
}, {
    image: "https://st0.dancf.com/market-operations/market/side/1713927132589.png?x-oss-process=image%2Fresize%2Cw_200%2Fformat%2Cwebp",
    link: "<sketch>",
    title: "素描",
}])
const styleIndex = ref(0)
const prompts = ["一个拿相机拍照的长发女孩，冬天穿着厚厚衣服，戴着围巾，背景上无云的蓝天，仰视构图", "一个亚洲白发老人，拿着手机，蓝色背景，面部聚焦", "中式花园，小桥流过巨石，柳树挂在上面，白底，白色背景"]
const input = ref("")
const output = ref([])
const tryPrompt = () => {
    let index = Math.floor(Math.random() * prompts.length)
    input.value = prompts[index]
}

const store = useUserStore();
const showLogin=inject("showLogin")
const confirm = async () => {
    if(!store.isLogin){
        showLogin.value=true
        return false;
    }
    if (!input.value) {
        ElMessage.error('创意描述不能为空')
        return false;
    }
    const data = { prompt: input.value, style: section1.value[styleIndex.value].link }
  
    const loadingInstance = ElLoading.service({
        lock: false,
        target:'#outputbox',
        text: '智能绘图中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    const { data: res } = await usePost("/api/bailian/image", data)
    const task_id = res.value.data.output.task_id
    let timer = setInterval(async () => {
        const { data: res2 } = await useGet("/api/bailian/status?id=" + task_id)
        let task_status=res2.value.data.output.task_status
        if (task_status == "SUCCEEDED") {
            clearInterval(timer)
            loadingInstance.close()
            output.value = res2.value.data.output.results
        }
        if (task_status == "FAILED") {
            clearInterval(timer)
            loadingInstance.close()
            ElMessage.error("图片生成失败")
        }


    }, 1000);




}
</script>